<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title></title>
    <!-- <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script> -->
    <script src="assets/js/vue.js"></script>
    <script src="assets/js/axios.js"></script>
    <link rel="stylesheet" href="assets/css/element.css">
    <!-- 引入组件库 -->
    <script src="assets/js/element.js"></script>
    <!-- Required CSS files -->
    <link href="assets/css/fonts.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/owl.carousel.css">
    <link rel="stylesheet" href="assets/css/mycss.css">

    <link rel="stylesheet" href="assets/css/barfiller.css">
    <link rel="stylesheet" href="assets/css/animate.css">
    <link rel="stylesheet" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" href="assets/css/slicknav.css">
    <link rel="stylesheet" href="assets/css/main.css">
</head>

<body style="background:#efefef">
    <div id="app"
        style="background-image:url(https://www1.pconline.com.cn/2017/usercenter/images/cover.png);background-repeat: no-repeat;background-size: 80% 325px;background-position:top center;">
        <div class="preloader">
            <span class="preloader-spin"></span>
        </div>

        <el-dialog title="修改密码" :visible.sync="dialogFormVisible">
                <el-form :model="form" style="text-align: left;">
                    <el-form-item label="新密码：" :label-width="formLabelWidth">
                        <el-input v-model="form.password" type="password" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="再次输入新密码：" :label-width="formLabelWidth">
                        <el-input v-model="rePassword" type="password" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="modify()">确 定</el-button>
                </div>
            </el-dialog>
        <div class="site">
            <header>
                <div class="container">
                    <div class="row">
                        <div class="col-6 col-sm-3 logo-column">
                            <a href="index.html" class="logo" style="color:#fff;font-size:22px">
                                <img src="assets/img/logo.png" alt="logo">&nbsp电脑DIY技术分享
                            </a>
                        </div>
                        <div class="col-6 col-sm-9 nav-column clearfix">
                            <div class="right-nav">
                                <span class="search-icon fa fa-search"></span>
                                <form action="" class="search-form" @submit.prevent="checkForm">
                                    <input v-model="s" type="search" placeholder="请输入关键字">
                                    <button type="submit"><i class="fa fa-search"></i></button>
                                </form>
                            </div>
                            <nav id="menu" class="d-none d-lg-block">
                                <ul>
                                    <li><a style="cursor:pointer;color:#acbbce" @click="pub">发帖</a></li>

                                    <li v-if="userInfo.name" class="has-child">
                                        <a href="mine.html"><img :src="content.head_img"
                                                style="width:30px;height:30px;border-radius:50%" alt="">
                                            {{userInfo.name}}</a>
                                        <ul class="sub-menu" style="z-index: 1000">
                                            <li><a @click="logout">注销</a></li>
                                            <li><a @click="dialogFormVisible = true">修改密码</a></li>
                                        </ul>
                                    </li>
                                    <li v-else><a style="cursor:pointer;color:#acbbce" @click="toLogin">登录</a></li>
                                </ul>
                            </nav>
                        </div>
                    </div>
                </div>
            </header>
            <div class="container text-center">

                <el-card class="box-card" style="margin-top:50px">
                    <el-row :gutter="20">
                        <el-col :span="3">
                            <div class="grid-content bg-purple" style="float:left;">
                                <img style="width:100px;border-radius:50%;float:left;display: block"
                                    :src="content.head_img?content.head_img:'https://i7.3conline.com/images/upload/upc/face/29/47/75/76/29477576_70x70'" alt="">
                                <br>
                                <!-- <el-button type="danger" @click="dialogFormVisible = true"
                                    style="float:left;margin-top: 10px" round>修改资料</el-button> -->
                            </div>
                        </el-col>
                        <el-col :span="18" style="text-align:left">
                            <el-row>
                                <el-col :span="8">
                                    <p>昵称：{{content.name?content.name:'未填写'}}</p>
                                </el-col>
                                <el-col :span="8">
                                    <p>性别：{{content.sex?content.sex:'未填写'}}</p>
                                </el-col>
                                <el-col :span="8">
                                    <el-popover placement="bottom" width="200" trigger="click">
                                        <div style="text-align: right; margin: 0">
                                            <el-input v-model="reason" placeholder="请输入举报内容"></el-input>
                                            <el-button size="mini" type="text" @click="visible2 = false">取消
                                            </el-button>
                                            <el-button type="primary" size="mini" @click="report(content.id)">确定
                                            </el-button>
                                        </div>
                                        <el-link type="danger" slot="reference">
                                            举报
                                        </el-link>
                                    </el-popover>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <p>手机号：{{content.phone?content.phone:'未填写'}}</p>
                                </el-col>
                                <el-col :span="12">
                                    <p>邮箱：{{content.mail?content.mail:'未填写'}}</p>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="12">
                                    <p>地址：{{content.phone?content.phone:'未填写'}}</p>
                                </el-col>


                            </el-row>
                            <el-divider></el-divider>
                            <el-col :span="12">
                                签名：<p style="max-height:150px;overflow: hidden;" v-html="content.signature"></p>
                            </el-col>
                        </el-col>

                    </el-row>


                </el-card>

                <br>


                <el-row :gutter="20">
                    <el-col :span="16">
                        <el-tabs type="border-card">
                            <!-- <el-tab-pane label="动态">

                            </el-tab-pane> -->
                            <el-tab-pane label="Ta的帖子">
                                <div v-for="o in list" style="text-align:left;width:100%;padding:2px;border-radius:5px"
                                    class="divhover">
                                    <p>
                                        <b @click="toDetail(o.id,o.module_id)">{{o.title}}</b>
                                        <!-- <span style="float:right">
                                            <el-button @click="modify(o.id)" type="warning" size="mini">
                                                修改
                                            </el-button>

                                        </span> -->
                                    </p>
                                    <p>
                                        <span>时间：{{o.publish_time}}
                                            回复：{{o.replyNum}}
                                            浏览：{{o.assess_times}}
                                        </span>
                                        <span style="float:right">
                                            板块： <el-tag size="medium">{{o.moduleName}}</el-tag>
                                        </span>
                                    </p>
                                    <hr style="margin:1px">

                                </div>
                                <el-card style="margin-top:5px">
                                    <el-pagination background layout="prev, pager, next" :total="total"
                                        @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                        :current-page.sync="currentPage" :hide-on-single-page="true">
                                    </el-pagination>
                                </el-card>
                            </el-tab-pane>

                            <!-- <el-tab-pane label="Ta的评论">

                                <el-table formatter resizable :data="myCommentList" style="width: 100%">
                                    <el-table-column prop="content" label="评论内容" width="380">
                                        <template slot-scope="scope">

                                            <div v-html="scope.row.content"></div>

                                        </template>
                                    </el-table-column>
                                    <el-table-column prop="reply_time" label="评论时间" width="180">
                                    </el-table-column>
                                </el-table>
                                <el-card style="margin-top:5px">
                                    <el-pagination background layout="prev, pager, next" :total="commentTotal"
                                        @current-change="changePage" :current-page.sync="commentCurrentPage"
                                        :hide-on-single-page="true">
                                    </el-pagination>
                                </el-card>
                            </el-tab-pane> -->
                        </el-tabs>
                    </el-col>
                    <el-col :span="8">
                        <!-- <el-card style="height:200px;margin-bottom: 20px">
                            <el-tabs v-model="activeName3" @tab-click="handleClick">
                                <el-tab-pane label="关注(0)" name="0">
                                    <img style="width:30%" src="" alt="">
                                </el-tab-pane>
                                <el-tab-pane label="粉丝(0)" name="1">
                                    <img style="width:30%" src="" alt="">

                                </el-tab-pane>
                            </el-tabs>
                        </el-card> -->
                        <el-card style="height:240px;margin-bottom: 20px">
                            <p style="text-align:left">Ta的访客</p>
                            <hr>
                            <span @click="toUserDetail(o.accessId)"
                                style="float:left;width: 60px;height:70px;cursor:pointer" v-for="o in guestList">
                                <img style="width:60px;height:60px;margin:1px;border-radius:50%" :src="o.accessImg"
                                    :alt="o.accessName" :title="o.accessTime+'\n'+o.accessName" />
                                <span
                                    style="font-size:12px;color:darkgray; width:60px;height:10px">{{o.accessName}}</span>
                            </span>
                        </el-card>
                        <el-button type="danger" id="btnTop" style="display: none;z-index: 100;width:360px"
                            @click="toTop" icon="el-icon-top">
                            回到顶部
                        </el-button>
                    </el-col>

                </el-row>



            </div>

            <footer>
                <div class="footer-top">
                    <div class="container">
                        <div class="row">
                            <div class="col-md-6 col-lg-3 footer_widget">
                                <div class="inner">
                                    <h4>友情链接</h4>
                                    <p>
                                        <ul>
                                            <li><a target="_blank"
                                                    href="http://page.china.alibaba.com/buy/trade/7.html">阿里巴巴数码</a>
                                            </li>
                                            <li><a target="_blank" href="http://zone.it.sohu.com/">搜狐数码</a></li>
                                            </li>
                                            </li>
                                            <li><a target="_blank" href="//bbs.pchouse.com.cn">太平洋家居网论坛</a></li>
                                            <li><a target="_blank" href="http://fans.tcl.com/portal.php">铁粉社区(TCL)</a>
                                            </li>
                                            <li><a target="_blank" href="http://bbs.coocaa.com/">酷开社区</a></li>
                                        </ul>
                                    </p>

                                </div>
                            </div>
                            <div class="col-md-6 col-lg-3 footer_widget">
                                <div class="inner">
                                    <ul>
                                        <li><a target="_blank" href="http://bbs.mumayi.com/">安卓论坛</a></li>
                                        <li><a target="_blank" href="//product.pconline.com.cn/itbk/">IT百科</a></li>
                                        <li><a target="_blank" href="//dl.pconline.com.cn/android/">太平洋手机软件</a></li>
                                        <li><a target="_blank"
                                                href="https://product.pconline.com.cn/mobile/apple/1123572.html">iPhone
                                                XR</a>
                                        </li>
                                        <li><a target="_blank" href="http://bbs.yunos.com">云OS社区</a></li>
                                        <li><a target="_blank" href="http://bbs.elecfans.com">电子技术论坛</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="footer-bottom">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-6">
                                <div class="copyright-txt">
                                    Copyright &copy; 2019.郑州大学北校区 All rights reserved.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </footer>

   
        </div>
    </div>

    <!--Required JS files-->
    <script src="assets/js/jquery-2.2.4.min.js"></script>
    <script src="assets/js/vendor/popper.min.js"></script>
    <script src="assets/js/vendor/bootstrap.min.js"></script>
    <script src="assets/js/vendor/owl.carousel.min.js"></script>
    <script src="assets/js/vendor/isotope.pkgd.min.js"></script>
    <script src="assets/js/vendor/jquery.barfiller.js"></script>
    <script src="assets/js/vendor/loopcounter.js"></script>
    <script src="assets/js/vendor/slicknav.min.js"></script>
    <script src="assets/js/active.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                s: '',
                reason: '',
                imageUrl: '',
                seen: true,
                content: {},
                total: 0,
                currentPage: 1,
                id: 0,
                list: [],
                dialogFormVisible: false,
                activeIndex: '1',
                userInfo: '',
                activeIndex2: '1',
                formLabelWidth: '140px',
                form: {
                    password: ''
                },
                dialogFormVisible: false,
                rePassword: '',
                activeName3: '0',
                commentTotal: 0,
                commentCurrentPage: 1,
                myCommentList: [],
                guestList: [],
                imgs: ['https://s2.ax1x.com/2019/05/06/EBRZqK.jpg', 'https://s2.ax1x.com/2019/05/06/EBRZqK.jpg'],

            },
            methods: {
                pub() {
                    let _this = this

                    if (_this.$data.userInfo == '') {
                        _this.$message.error("请先登录！")
                        return false
                    }
                    location.href = ("publish.html")

                },
                modify() {
                    if(this.form.password!=this.rePassword){
                        this.$message.error('两次输入的密码不一致，请重新输入')
                        return false
                    }
                    axios({
                        method: 'PUT',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: `http://127.0.0.1:888/member/password?password=${this.form.password}`,
                    }).then((re) => {
                        console.log('re', re)
                        if (re.data.code === 2) {
                            this.$message({
                                message: '修改成功，请重新登录',
                                type: 'success'
                            });
                            setTimeout('location.href=("login.html")', 1000)

                        }
                        else if (re.data.code === 1) {
                            this.$message.error('登录超时')
                        } else {
                            this.$message.error(re.data.content)
                        }
                    })
                },
                checkForm(param) {
                    let _this = this
                    let searchUrl = encodeURI(`list.html?s=${_this.$data.s}`);   //使用encodeURI编码
                    let code = escape(_this.$data.s)
                    location.href = (`list.html?s=${code}&id=3`)
                },
                toLogin() {
                    location.href = (`login.html?backUrl=${escape(document.location.pathname + document.location.search)}`)
                },
                guest(id) {
                    axios({
                        method: 'get',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: `http://127.0.0.1:888/access/list?userId=${id}`,
                    }).then((re) => {
                        console.log(re)
                        if (re.data.code === 0) {
                            this.$data.guestList = re.data.content
                            // 显示增强 回到顶部

                        }
                    })
                },
                handleAvatarSuccess(res, file) {

                },
                report(id) {
                    console.log('iddd', id)
                    let _this = this
                    if (_this.userInfo == '') {
                        _this.$message.error('请先登录！')
                        return false
                    }
                    axios({
                        method: "post",
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/json',
                        },
                        url: 'http://127.0.0.1:888/diss/add',
                        data: {
                            memberId: id,
                            reason: _this.$data.reason
                        }

                    }).then((res) => {
                        if (res.data.code == 0) {
                            this.$message({
                                message: "举报成功，我们将尽快处理您的反馈信息",
                                type: "success"
                            })
                        } else {
                            this.$message.error(res.data.content)
                        }
                    })

                },
                beforeAvatarUpload(file) {
                    console.log('fi', file)
                    const isJPG = file.type === 'image/jpeg';
                    const isPNG = file.type === 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG && !isPNG) {
                        this.$message.error('上传头像图片只能是 JPG 或 PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return (isJPG || isPNG) && isLt2M;
                },
                handleSizeChange(e) {
                    console.log('size', e)
                },
                changePage(e) {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    axios({
                        method: 'get',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: `http://127.0.0.1:888/reply/my_list?current=${e}`,
                    }).then((re) => {
                        console.log(re)
                        if (re.data.code === 0) {
                            this.$data.myCommentList = re.data.content.records
                            loading.close();
                            // 显示增强 回到顶部
                            this.toTop();

                        }
                    })
                },
                handleCurrentChange(e) {
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    axios({
                        method: 'get',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: `http://127.0.0.1:888/invitation/page?memberId=${this.$data.userInfo.id}&current=${e}`,
                    }).then((re) => {
                        console.log(re)
                        if (re.data.code === 0) {
                            this.$data.list = re.data.content.records
                            loading.close();
                            // 显示增强 回到顶部
                            this.toTop();

                        }
                    })
                },

                toDetail(id, mid) {
                    location.href = (`detail.html?id=${id}&mid=${mid}`)
                },
                toUserDetail(id) {
                    let _this = this
                    console.log(id, _this.userInfo.id)
                    if (id == _this.userInfo.id) {
                        location.href = (`mine.html`)
                    } else {
                        location.href = (`info.html?id=${id}`)
                    }
                },
                update() {

                    axios({
                        method: 'PUT',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/json',
                        },
                        url: 'http://127.0.0.1:888/member/new',
                        data: this.$data.form
                    }).then((re) => {
                        console.log('re', re)
                        if (re.data.code === 0) {
                            this.$message({
                                message: '修改成功',
                                type: 'success'
                            });
                            this.dialogFormVisible = false
                            this.$data.userInfo = re.data.content
                            sessionStorage.setItem('userInfo', JSON.stringify(re.data.content))
                        }
                        else {
                            this.$message.error(re.data.content)
                        }

                    })
                },
                modify(id) {
                    location.href = (`publish.html ? id = ${id} `)
                },
                handleClick(e) {
                    this.$data.activeName3 = e.name
                },
                logout() {
                    axios({
                        method: 'get',
                        headers: {
                            'token': sessionStorage.getItem('token'),
                            'Content-Type': 'application/x-www-form-urlencoded',
                        },
                        url: 'http://127.0.0.1:888/member/out',
                    }).then((re) => {
                        console.log('re', re)
                        if (re.data.code === 0) {
                            this.$message({
                                message: '注销成功',
                                type: 'success'
                            });
                            setTimeout('location.href=("login.html")', 500)


                        }
                    })
                },
                GetRequest() {
                    var url = location.search; //获取url中"?"符后的字串  
                    var theRequest = new Object();
                    if (url.indexOf("?") != -1) {
                        var str = url.substr(1);
                        strs = str.split("&");
                        for (var i = 0; i < strs.length; i++) {
                            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
                        }
                    }
                    return theRequest;
                },
                toTop() {
                    let timer = null;
                    cancelAnimationFrame(timer);
                    timer = requestAnimationFrame(function fn() {
                        let oTop = document.body.scrollTop || document.documentElement.scrollTop;
                        if (oTop > 0) {
                            document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                            timer = requestAnimationFrame(fn);
                        } else {
                            cancelAnimationFrame(timer);
                        }
                    });
                },
                getList(id) {
                    let _this = this
                    axios.defaults.headers.post['Content-Type'] = "application/x-www-form-urlencoded"
                    axios.defaults.headers.token = sessionStorage.getItem('token')
                    const loading = this.$loading({
                        lock: true,
                        text: 'Loading',
                        spinner: 'el-icon-loading',
                        background: 'rgba(0, 0, 0, 0.7)'
                    });
                    axios.all([
                        axios.get(`http://127.0.0.1:888/reply/my_list`),
                        axios.get(`http://127.0.0.1:888/invitation/page?memberId=${id}`),
                        axios.get(`http://127.0.0.1:888/member/info?userId=${id}`)
                    ]).then(axios.spread(function (ires, sres, mres) {
                        if (ires.data.code === 0) {
                            _this.$data.list = sres.data.content.records
                            _this.$data.total = sres.data.content.total
                        }
                        if (ires.data.code !== 0) {
                            _this.$message.error("登录超时")
                            // sessionStorage.removeItem('userInfo')
                            // setTimeout("location.href=('index.html')", 800)
                        }

                        if (sres.data.code === 0) {
                            _this.$data.myCommentList = ires.data.content.records
                            _this.$data.commentTotal = ires.data.content.total
                            loading.close()

                        }
                        if (sres.data.code !== 0) {
                            _this.$message.error("登录超时")
                            // sessionStorage.removeItem('userInfo')
                            // setTimeout("location.href=('index.html')", 800)
                        }


                        if (mres.data.code === 0) {
                            _this.$data.content = mres.data.content

                        }
                        if (mres.data.code !== 0) {
                            _this.$message.error("登录超时")
                            // sessionStorage.removeItem('userInfo')
                            // setTimeout("location.href=('index.html')", 800)
                        }
                        console.log('User', ires.data);
                        console.log('self', sres.data);

                        console.log('content', _this.$data.content);
                    }));

                }

            },
            created: function () {
                window.onscroll = function () {
                    scrollFunction()
                };


                function scrollFunction() {
                    if (document.body.scrollTop > 320 || document.documentElement.scrollTop > 320) {
                        document.getElementById("btnTop").style.display = "block";
                    } else {
                        document.getElementById("btnTop").style.display = "none";
                    }
                }
                let _this = this
                let param = _this.GetRequest()
                let userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
                console.log('user', userInfo)
                if (userInfo != null) {
                    _this.$data.userInfo = userInfo
                }
                if (param.id != undefined && param.id != "") {
                    if (userInfo.id == param.id) {
                        location.href=("mine.html")
                    }
                    _this.$data.id = param.id

                    _this.getList(_this.$data.id)
                    _this.guest(_this.$data.id)
                }


            }
        })


    </script>
</body>

</html>